'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Button, Space, Switch, Dropdown, Avatar } from 'antd'
import { AppstoreOutlined, UploadOutlined, HomeOutlined, UserOutlined, LoginOutlined, LogoutOutlined, QuestionCircleOutlined, InfoCircleOutlined, CommentOutlined } from '@ant-design/icons'
import { useAuth } from '../contexts/AuthContext'

export default function Header() {
    const [currentMode, setCurrentMode] = useState('browse') // 'browse' or 'upload'
    const { user, logout, isAuthenticated } = useAuth()
    const router = useRouter()

    const handleModeSwitch = (checked) => {
        setCurrentMode(checked ? 'upload' : 'browse')
    }

    const handleLogout = () => {
        logout()
    }

    // 处理菜单项点击，目标页面还没有实现
    const handleMenuClick = (key) => {
        switch (key) {
            case 'profile':
                router.push('/profile')
                break
            case 'my-products':
                router.push('/my-products')
                break
            case 'logout':
                handleLogout()
                break
            default:
                break
        }
    }

    // 用户菜单项
    const userMenuItems = [
        {
            key: 'profile',
            label: '个人资料',
            icon: <UserOutlined />,
            onClick: () => handleMenuClick('profile'),
        },
        {
            key: 'my-products',
            label: '我的产品',
            icon: <AppstoreOutlined />,
            onClick: () => handleMenuClick('my-products'),
        },
        {
            type: 'divider',
        },
        {
            key: 'logout',
            label: '退出登录',
            icon: <LogoutOutlined />,
            onClick: () => handleMenuClick('logout'),
        },
    ]

    return (
        <header className="bg-white shadow-sm border-b border-gray-200">
            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-16">
                    {/* Logo and Title */}
                    <div className="flex items-center space-x-4">
                        <Link href="/" className="flex items-center space-x-2 text-xl font-bold text-gray-900 hover:text-blue-600 transition-colors">
                            <AppstoreOutlined className="text-2xl" />
                            <span className="hidden sm:block">产品展示平台</span>
                        </Link>
                    </div>

                    {/* Navigation */}
                    <nav className="hidden md:flex items-center space-x-6">
                        <Link
                            href="/about"
                            className="flex items-center space-x-1 text-gray-600 hover:text-blue-600 transition-colors"
                        >
                            <InfoCircleOutlined />
                            <span>关于平台</span>
                        </Link>

                        <Link
                            href="/community"
                            className="flex items-center space-x-1 text-gray-600 hover:text-blue-600 transition-colors"
                        >
                            <CommentOutlined />
                            <span>社区交流</span>
                        </Link>

                        <Link
                            href="/help"
                            className="flex items-center space-x-1 text-gray-600 hover:text-blue-600 transition-colors"
                        >
                            <QuestionCircleOutlined />
                            <span>帮助文档</span>
                        </Link>
                    </nav>

                    {/* Right Side */}
                    <div className="flex items-center space-x-4">
                        {/* Mode Switch - Only show for authenticated users */}
                        {isAuthenticated && (
                            <div className="flex items-center space-x-2">
                                <span className={`text-sm ${currentMode === 'browse' ? 'text-blue-600 font-medium' : 'text-gray-500'}`}>
                                    浏览模式
                                </span>
                                <Switch
                                    checked={currentMode === 'upload'}
                                    onChange={handleModeSwitch}
                                    checkedChildren={<UploadOutlined />}
                                    unCheckedChildren={<AppstoreOutlined />}
                                    className="bg-gray-300"
                                />
                                <span className={`text-sm ${currentMode === 'upload' ? 'text-blue-600 font-medium' : 'text-gray-500'}`}>
                                    上传模式
                                </span>
                            </div>
                        )}

                        {/* Action Button */}
                        {isAuthenticated ? (
                            <Space>
                                {currentMode === 'upload' ? (
                                    <Link href="/upload">
                                        <Button type="primary" icon={<UploadOutlined />}>
                                            上传产品
                                        </Button>
                                    </Link>
                                ) : (
                                    <Link href="/products">
                                        <Button icon={<AppstoreOutlined />}>
                                            浏览产品
                                        </Button>
                                    </Link>
                                )}

                                {/* User Menu */}
                                <Dropdown
                                    menu={{ items: userMenuItems }}
                                    placement="bottomRight"
                                    trigger={['click']}
                                >
                                    <Button type="text" className="flex items-center space-x-2">
                                        <Avatar size="small" icon={<UserOutlined />} />
                                        <span className="hidden sm:inline">{user?.full_name || user?.username}</span>
                                    </Button>
                                </Dropdown>
                            </Space>
                        ) : (
                            <Space>
                                <Link href="/login">
                                    <Button icon={<LoginOutlined />}>
                                        登录
                                    </Button>
                                </Link>
                                <Link href="/register">
                                    <Button type="primary" icon={<UserOutlined />}>
                                        注册
                                    </Button>
                                </Link>
                            </Space>
                        )}
                    </div>
                </div>

                {/* Mobile Navigation */}
                <div className="md:hidden pb-4">
                    <div className="flex items-center justify-between">
                        <nav className="flex space-x-4">
                            <Link
                                href="/"
                                className="flex items-center space-x-1 text-gray-600 hover:text-blue-600 transition-colors"
                            >
                                <HomeOutlined />
                                <span>首页</span>
                            </Link>
                            <Link
                                href="/products"
                                className="flex items-center space-x-1 text-gray-600 hover:text-blue-600 transition-colors"
                            >
                                <AppstoreOutlined />
                                <span>产品展示</span>
                            </Link>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
    )
}